<template>
  <div class="all">
    <header>
      <div class="div" @click="back">
        <img src="../../../assets/返回.png" alt="">
        <span class="solid">返回</span>
      </div>
      <div class="div">
        <span>系统设置</span>
      </div>
      <div class="div">
        <span @click="keep" class="solid">保存</span>
      </div>
    </header>
    <van-cell center title="是否允许加入" >
      <template #right-icon>
        <van-switch @click="checked = !checked" v-model="checked" size="24" />
      </template>
    </van-cell>
    <van-dialog v-model="keepShow"
                width="80%"
                confirm-button-color="#1da4f2"
                title="确认保存吗？"
                @confirm="keepConfirm()"
                show-cancel-button>
    </van-dialog>
  </div>
</template>

<script>
export default {
  name: 'TeamSystemSettings',
  data () {
    return {
      is_allow_in: this.$route.query.is_allow_in,
      team_id: this.$route.query.team_id,
      id: this.$route.query.id,
      checked: null,
      keepShow: false
    }
  },
  computed: {
  },
  mounted () {
    if (this.is_allow_in == 0) {
      this.checked = false
    } else if (this.is_allow_in == 1) {
      this.checked = true
    }
  },
  methods: {
    keepConfirm () {
      let is_allow_in = null
      if (this.checked == false) {
        is_allow_in = 0
      } else if (this.checked == true) {
        is_allow_in = 1
      }
      let id = ''
      if (this.team_id) {
        id = this.team_id
      } else {
        id = this.id
      }
      this.$http.createDocTeam({id: id,
        is_allow_in: is_allow_in})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.$toast('保存成功')
          } else {
            this.$toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
    },
    keep () {
      this.keepShow = true
    },
    // 返回
    back () {
      this.$router.history.go(-1)
    }
  }
}
</script>

<style scoped>
.all{
  width: 100%;
  height: 100%;
  background: #FAF9FE;
  overflow: auto;
  font-size: 15px;
  font-family: PingFang SC;
}
header{
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #E5E5E5;
  background: white;
  position: sticky;
  top: 0;
  z-index: 9;
}
.div{
  width: 33%;
  height: 100%;
  display: flex;
  align-items: center;
  font-family: "PingFang SC";
  font-size: 15px;
  font-weight: bold;
}
.div img{
  margin-right: 5px;
}
.div:nth-child(1) img{
  height: 13px;
  width: 7px;
  margin-left: 15px;
}
.div:nth-child(3) img{
  margin-right: 5px;
  width: 13px;
  height: 13px;
}
.div:nth-child(3) span{
  margin-right: 15px;
}
.div:nth-child(2){
  justify-content: center;
}
.div:nth-child(3){
  justify-content: flex-end;
}
.solid{
  color: #1DA4F2;
}
</style>
